<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="修改"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['promotions:member-day:modify']" v-loading="loading">
      <a-form
        ref="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        :model="formData"
        :rules="rules"
      >
        <a-divider>基本信息</a-divider>
        <a-form-item label="会员活动名称" name="name">
          <a-input v-model:value="formData.name" max-length="20" allow-clear />
        </a-form-item>
        <a-form-item label="会员活动时间" name="beginDate">
          <a-range-picker
            style="width: 100%"
            :value="range_date"
            :presets="presets"
            @change="
              (val) => {
                formData.beginDate = val?.[0]?.format('YYYY-MM-DD') + ' 00:00:00';
                formData.endDate = val?.[1]?.format('YYYY-MM-DD') + ' 23:59:59';
              }
            "
            allow-clear
          />
        </a-form-item>
        <a-form-item label="会员活动范围" name="scopeType">
          <a-select v-model:value="formData.scopeType" allow-clear>
            <a-select-option
              v-for="item in $enums.SCOPE_TYPE.values()"
              :key="item.code"
              :value="item.code"
              >{{ item.desc }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="参加方式" name="attendType">
          <a-select v-model:value="formData.attendType" allow-clear>
            <a-select-option
              v-for="item in $enums.ATTEND_TYPE.values()"
              :key="item.code"
              :value="item.code"
              >{{ item.desc }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="领取模式" name="claimMode">
          <a-select v-model:value="formData.claimMode" allow-clear>
            <a-select-option
              v-for="item in $enums.CLAIM_MODE.values()"
              :key="item.code"
              :value="item.code"
              >{{ item.desc }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-divider>权益信息</a-divider>
        <a-form-item label="适用会员等级" name="allMemberLevel">
          <a-row>
            <a-col :span="8">
              <div style="padding-top: 5px">
                <a-radio-group
                  v-model:value="formData.allMemberLevel"
                  name="allMemberLevelGroup"
                  @change="
                    () => {
                      if (formData.allMemberLevel) {
                        formData.memberLevelIds = [];
                      }
                    }
                  "
                >
                  <a-radio :value="true">全部等级</a-radio>
                  <a-radio :value="false">指定等级</a-radio>
                </a-radio-group>
              </div>
            </a-col>
            <a-col :span="16">
              <div style="padding-top: 5px" v-if="!formData.allMemberLevel">
                <member-level-selector
                  v-model:value="formData.memberLevelIds"
                  :multiple="true"
                  :show-sum="true"
                />
              </div>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="权益">
          <a-row>
            <a-col :span="6">
              <div style="padding-top: 3px">
                <a-checkbox
                  v-model:checked="formData.discountFlag"
                  @change="
                    (val) => {
                      if (val) {
                        formData.discountValue = null;
                      }
                    }
                  "
                  >消费折扣</a-checkbox
                >
              </div>
            </a-col>
            <a-col :span="18">
              <a-input-number
                style="width: 100%"
                v-model:value="formData.discountValue"
                :min="0"
                :readonly="!formData.discountFlag"
                :disabled="!formData.discountFlag"
                addon-after="折"
                allow-clear
              />
            </a-col>
          </a-row>
          <a-row style="padding-top: 10px">
            <a-col :span="6">
              <div style="padding-top: 3px">
                <a-checkbox
                  v-model:checked="formData.scoreFlag"
                  @change="
                    (val) => {
                      if (val) {
                        formData.scoreValue = null;
                      }
                    }
                  "
                  >送积分</a-checkbox
                >
              </div>
            </a-col>
            <a-col :span="18">
              <a-input-number
                style="width: 100%"
                v-model:value="formData.scoreValue"
                :min="0"
                :readonly="!formData.scoreFlag"
                :disabled="!formData.scoreFlag"
                addon-after="积分"
                allow-clear
              />
            </a-col>
          </a-row>
          <a-row style="padding-top: 10px">
            <a-col :span="6">
              <div style="padding-top: 3px">
                <a-checkbox
                  v-model:checked="formData.consumeScoreFlag"
                  @change="
                    (val) => {
                      if (val) {
                        formData.consumeScoreRate = null;
                      }
                    }
                  "
                  >消费送多倍积分</a-checkbox
                >
              </div>
            </a-col>
            <a-col :span="18">
              <a-input-number
                style="width: 100%"
                v-model:value="formData.consumeScoreRate"
                :min="0"
                :readonly="!formData.consumeScoreFlag"
                :disabled="!formData.consumeScoreFlag"
                addon-after="倍"
                allow-clear
              />
            </a-col>
          </a-row>
          <a-row style="padding-top: 10px">
            <a-col :span="6">
              <div style="padding-top: 3px">
                <a-checkbox
                  v-model:checked="formData.couponFlag"
                  @change="
                    (val) => {
                      if (val) {
                        formData.couponIds = [];
                      }
                    }
                  "
                  >赠送卡券</a-checkbox
                >
              </div>
            </a-col>
            <a-col :span="18">
              <coupon-selector
                v-model:value="formData.couponIds"
                :multiple="true"
                :show-sum="true"
                :disabled="!formData.couponFlag"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <div class="form-modal-footer">
          <a-space>
            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
              >保存</a-button
            >
            <a-button :loading="loading" @click="closeDialog">取消</a-button>
          </a-space>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as api from '@/api/promotions/member/day';
  import MemberLevelSelector from '@/components/Selector/src/MemberLevelSelector.vue';
  import CouponSelector from '@/components/Selector/src/CouponSelector.vue';
  import dayjs from 'dayjs';

  export default defineComponent({
    // 使用组件
    components: { CouponSelector, MemberLevelSelector },
    props: {
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        //
        presets: [
          { label: '今天', value: [dayjs(), dayjs()] },
          { label: '最近3天', value: [dayjs(), dayjs().add(3, 'day')] },
          { label: '最近7天', value: [dayjs(), dayjs().add(7, 'day')] },
          { label: '最近30天', value: [dayjs(), dayjs().add(30, 'day')] },
        ],
        // 表单数据
        formData: {},
        // 表单校验规则
        rules: {
          name: [{ required: true, message: '请输入会员活动名称' }],
          beginDate: [{ required: true, message: '请输入会员活动时间' }],
          promotionsType: [
            {
              required: true,
              message: '请输入会员活动类型(1:生日营销; 2:节日营销; 3:会员日营销;)',
            },
          ],
          scopeType: [{ required: true, message: '请输入会员活动范围' }],
          attendType: [{ required: true, message: '请输入参加方式' }],
          claimMode: [{ required: true, message: '请输入领取模式' }],
          allMemberLevel: [{ required: true, message: '请输入是否适应全部会员等级' }],
        },
      };
    },
    computed: {
      range_date() {
        return [
          this.formData.beginDate ? dayjs(this.formData.beginDate) : null,
          this.formData.endDate ? dayjs(this.formData.endDate) : null,
        ];
      },
    },
    created() {
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          name: '',
          beginDate: '',
          endDate: '',
          promotionsType: 3,
          scopeType: 1,
          attendType: 1,
          claimMode: 1,
          allMemberLevel: true,
          memberLevelIds: [],
          consumeScoreFlag: false,
          consumeScoreRate: null,
          scoreFlag: false,
          scoreValue: null,
          couponFlag: false,
          couponIds: [],
          discountFlag: false,
          discountValue: null,
        };
      },
      // 提交表单事件
      submit() {
        this.$refs.form.validate().then((valid) => {
          if (valid) {
            this.loading = true;
            api
              .update(this.formData)
              .then(() => {
                this.$msg.createSuccess('修改成功！');
                this.$emit('confirm');
                this.visible = false;
              })
              .finally(() => {
                this.loading = false;
              });
          }
        });
      },
      // 页面显示时触发
      open() {
        // 初始化数据
        this.initFormData();

        // 查询数据
        this.loadFormData();
      },
      // 查询数据
      loadFormData() {
        this.loading = true;
        api
          .get(this.id)
          .then((data) => {
            this.formData = data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  });
</script>
